<template>
	<div class="clearfloat padding-across-10" style="height:100%;margin-bottom: 100px" v-loading="loading" element-loading-text="拼命加载中">
		<div class="navList">
			<div>
				<el-button class="mb5" size="small" type="primary" @click="reloadDatas">
					<i v-if="!refreshObj.waitting" class="el-icon el-icon-eleg-icon_refresh el-icon--left"></i>
					<i v-else class="el-icon-loading" style="font-size:25px"></i>刷新
				</el-button>
				<el-button class="mb5" size="small" type="primary" @click="openFailure">
					<i class="el-icon-eleg-icon_error-triangle el-icon--left"></i>故障记录
				</el-button>
				<el-button class="mb5" size="small" type="primary" @click="openExp">
					<i class="el-icon-eleg-icon_clipboard el-icon--left"></i>异常报告
				</el-button>
				<el-button class="mb5" size="small" type="danger" @click="deleteHistoryData">
					<i class="el-icon-delete2 el-icon--left"></i>删除历史数据
				</el-button>
			</div>
			<div v-if="!isMobile">
				<el-tag type="gray" style="float: right;font-size:16px">出馆人数：{{info.OutFlow}}</el-tag>
				<el-tag type="success" style="float: right;font-size:16px;margin-right: 5px">进馆人数：{{info.InFlow}}</el-tag>
				<span style="font-size: 15px;float: right">今日人流量统计：</span>
			</div>
            <div v-else>
				<span style="font-size: 15px;float: right">今日人流量统计：</span>
				<el-tag type="gray" style="float: right;font-size:16px">出馆人数：{{info.OutFlow}}</el-tag>
				<el-tag type="success" style="float: right;font-size:16px;margin-right: 5px">进馆人数：{{info.InFlow}}</el-tag>
			</div>
		</div>
		<el-row :gutter="5">
			<el-col :span="24">
				<!-- 设备信息 -->
				<div class="bg-purple" style="margin-top: 5px">
					<div class="panel-title">
						<span>设备码：{{this.templateObj.sn}}</span>
						<span style="font-size: 13px;">(最后一次与服务器连接时间：{{pingTime}})</span>
						<img class="title-img" v-bind:src="imgTitleUrl">
					</div>
					<div>
						<el-table border style="width: 100%;margin-top: 1px" :data="deviceInfoData">
							<el-table-column label="名称" align="center">
								<template slot-scope="scope">
									<a style="color: #50bfff;text-decoration: underline;cursor: pointer" @click="changeDeviceName(scope.row)">{{ scope.row.name }}</a>
								</template>
							</el-table-column>
							<el-table-column label="型号" align="center" prop="model"></el-table-column>
							<el-table-column label="序列号" align="center" prop="serial"></el-table-column>
							<el-table-column label="类型" align="center" prop="type"></el-table-column>
							<el-table-column label="版本" align="center" prop="version"></el-table-column>
							<el-table-column label="状态" align="center">
								<template slot-scope="scope">
									<el-tag v-if="scope.row.online" type="success">
										<li class="el-icon-circle-check el-icon--left"></li>在线
									</el-tag>
									<el-tag v-else type="gray">
										<li class="el-icon-circle-close el-icon--left"></li>离线
									</el-tag>
								</template>
							</el-table-column>
						</el-table>
					</div>
				</div>
				<!-- 设备属性 -->
				<div class="bg-purple" style="margin-top: 5px" v-if="this.templateObj.model === 'LS406'">
					<div class="panel-title">
						<span>设备属性</span>
						<img class="title-img" v-bind:src="imgTitleUrl">
					</div>
					<div>
						<el-table border style="width: 100%;margin-top: 1px" :data="internetInfoData">
							<el-table-column label="IP地址" align="center" prop="IP"></el-table-column>
							<el-table-column label="MAC地址" align="center" prop="Mac"></el-table-column>
							<el-table-column label="子网掩码" align="center" prop="Mask"></el-table-column>
							<el-table-column label="网关" align="center" prop="GateWay"></el-table-column>
							<el-table-column :label="$t('message.operation')" align="center">
								<template slot-scope="scope">
									<el-button :disabled="!IsOnLine" type="primary" size="small" @click="changeDeviceIp(scope.row)"><i class="el-icon-edit el-icon--left"></i>修改</el-button>
								</template>
							</el-table-column>
						</el-table>
					</div>
				</div>
				<!-- 设备控制 -->
				<div class="bg-purple" style="margin-top: 5px">
					<div class="panel-title">
						<span>设备控制</span>
						<img class="title-img" v-bind:src="imgTitleUrl">
					</div>
					<el-row :gutter="5">
						<el-col :span="isMobile ? 8 : 4" v-if="this.templateObj.model === 'LS406'">
							<div class="grid-content1 bg-purple">
								<div class="detail-section">
									<div class="section-left">
										<div class="detail-title">
											<i class="fa fa-retweet fa-2x" style="color: #13ce66;"></i>
										</div>
									</div>
									<div class="section-right">
										<div>
											<small style="font-weight: bold;">反转进出方向</small>
										</div>
										<div>
											<el-button :disabled="!IsOnLine" type="primary" size="small">
												<span v-if="!turnDeviceObj.waitting" @click="turnDevice">控 制</span>
												<i v-else class="el-icon-loading"></i>
											</el-button>
										</div>
									</div>
								</div>
							</div>
						</el-col>
						<el-col  :span="isMobile ? 16 : 8">
							<div class="grid-content1 bg-purple">
								<div class="detail-section">
									<div class="section-left" style="width: 50%">
										<div class="detail-title">
											<i class="fa fa-user-times fa-2x" style="color: #13ce66;"></i>
										</div>
										<div>
											<el-radio-group v-model="radio">
												<el-radio :label="3">全部</el-radio>
												<el-radio  v-if="this.templateObj.model === 'LS406'" :label="1">进</el-radio>
												<el-radio  v-if="this.templateObj.model === 'LS406'" :label="2">出</el-radio>
											</el-radio-group>
										</div>
									</div>
									<div class="section-right" style="width: 50%">
										<div>
											<small style="font-weight: bold;">设备人流量清零</small>
										</div>
										<div>
											<el-button :disabled="!IsOnLine" type="primary" size="small" @click="clearFlowCount">
												<span v-if="!clearObj.waitting">确 定</span>
												<i v-else class="el-icon-loading"></i>
											</el-button>
										</div>
									</div>
								</div>
							</div>
						</el-col>
					</el-row>
				</div>
				<!-- 今日人流量记录 -->
				<div class="bg-purple" style="margin-top: 5px">
					<div class="panel-title">
						<span>今日人流量记录</span>
						<img class="title-img" v-bind:src="imgTitleUrl">
					</div>
					<div class="dataCount" id="echart_line" style="width: 100%;margin: 0 auto;height: 300px"></div>
				</div>
				<!-- 设备报警记录 -->
				<div class="bg-purple" style="margin-top: 5px" v-if="this.templateObj.model === 'LS406'">
					<div class="panel-title">
						<span>设备报警记录</span>
						<img class="title-img" v-bind:src="imgTitleUrl">
					</div>
					<div style="width: 100%;padding: 5px 0">
						<el-button size="small" type="primary" @click="refreshWarningData"><i class="el-icon-eleg-icon_refresh el-icon--left"></i>刷新</el-button>
						<el-button size="small" type="danger" @click="deleteWarning"><i class="el-icon-delete2 el-icon--left"></i>删除</el-button>
					</div>
					<el-table border style="width: 100%;" @selection-change="handleSelectionChange" :data="warningData">
						<el-table-column type="selection"></el-table-column>
						<el-table-column label="设备名" align="center" prop="name"></el-table-column>
						<el-table-column label="书名" align="center" prop="bookname"></el-table-column>
						<el-table-column label="书籍标签" align="center" prop="tag"></el-table-column>
						<el-table-column label="时间" align="center" prop="uploadtime"></el-table-column>
					</el-table>
					<div class="block" style="text-align:right;margin-bottom:60px;width: 100%;overflow: scroll;;">
						<el-pagination @current-change="handleCurrentChange" :current-page="currentPage" :page-sizes="[10, 20, 30, 40, 50]" :page-size="pageSize" layout="total, prev, pager, next, jumper" :total="totalSize">
						</el-pagination>
					</div>
				</div>
			</el-col>
		</el-row>
		<!-- 修改IP -->
		<el-dialog title="修改设备IP地址" v-model="changeDeviceIpDialog" :class="[dialog-tiny-width]">
			<el-form id="form" ref="changeIpForm" :model="changeIpForm" :rules="changeRules" label-width="100px">
				<el-form-item label="设备IP" prop="ip">
					<el-input v-model="changeIpForm.ip" required style="max-width:480px"></el-input>
				</el-form-item>
				<el-form-item label="设备网关" prop="gateway">
					<el-input v-model="changeIpForm.gateway" required style="max-width:480px"></el-input>
				</el-form-item>
				<el-form-item label="子网掩码" prop="mask">
					<el-input v-model="changeIpForm.mask" required style="max-width:480px"></el-input>
				</el-form-item>
			</el-form>
			<span slot="footer" class="dialog-footer">
				<el-button @click="changeDeviceIpDialog = false">取 消</el-button>
				<el-button type="primary" @click="confirmChangeIp('changeIpForm')">
					<span v-if="!changeIpObj.waitting">确 定</span>
					<i v-else class="el-icon el-icon-loading"></i>
				</el-button>
			</span>
		</el-dialog>
		<!-- 修改设备名称 -->
		<el-dialog title="修改设备名称" v-model="renameDeviceDialog" :class="[dialog-tiny-width]">
			<el-form id="form" ref="changeNameForm" :model="changeNameForm" :rules="changeNameRules" label-width="100px">
				<el-form-item label="设备名称" prop="name">
					<el-input v-model="changeNameForm.name" required style="max-width:480px"></el-input>
				</el-form-item>
			</el-form>
			<span slot="footer" class="dialog-footer">
				<el-button @click="renameDeviceDialog = false">取 消</el-button>
				<el-button type="primary" @click="confirmChangeName('changeNameForm')">确 定</el-button>
			</span>
		</el-dialog>
		<el-dialog title="设备故障记录" v-model="failureDialog" :class="[dialog-large-width]">
			<div style="padding-bottom: 2px">
				<span style="font-size: 13px;font-weight: bold">{{$t('message.start')}}</span>
				<el-date-picker :editable="false" :clearable="false" size="small" type="date" v-model="failureStartTime" placeholder="选择起始日期" @change="changeFailureStartTime"></el-date-picker>
				<span style="font-size: 13px;font-weight: bold">{{$t('message.end')}}</span>
				<el-date-picker :editable="false" :clearable="false" size="small" type="date" v-model="failureEndTime" placeholder="选择结束日期" @change="changeFailureEndTime"></el-date-picker>
			</div>
			<el-table border :data="failureDatas">
				<el-table-column :show-overflow-tooltip="true" type="selection"></el-table-column>
				<el-table-column :show-overflow-tooltip="true" label="设备" align="center" prop="name"></el-table-column>
				<el-table-column :show-overflow-tooltip="true" label="故障代码" align="center" prop="code"></el-table-column>
				<el-table-column :show-overflow-tooltip="true" label="故障时间" align="center" prop="time"></el-table-column>
				<el-table-column :show-overflow-tooltip="true" label="故障描述" align="center" prop="desc">
				</el-table-column>
			</el-table>
			<div class="block" style="text-align:right">
				<el-pagination @size-change="handleFailureSizeChange" @current-change="handleFailureCurrentChange" :current-page="failureCurrentPage" :page-size="failurePageSize" :page-sizes="[10, 20, 30, 40, 50]" layout="total,sizes, prev, pager, next, jumper" :total="failureTotalSize">
				</el-pagination>
			</div>
		</el-dialog>
		<el-dialog title="设备异常报告" v-model="expDialog" :class="[dialog-large-width]">
			<div style="padding-bottom: 2px">
				<span style="font-size: 13px;font-weight: bold">{{$t('message.start')}}</span>
				<el-date-picker :editable="false" :clearable="false" size="small" type="date" v-model="expStartTime" placeholder="选择起始日期" @change="changeExpStartTime"></el-date-picker>
				<span style="font-size: 13px;font-weight: bold">{{$t('message.end')}}</span>
				<el-date-picker :editable="false" :clearable="false" size="small" type="date" v-model="expEndTime" placeholder="选择结束日期" @change="changeExpEndTime"></el-date-picker>
			</div>
			<el-table border :data="expDatas">
				<el-table-column :show-overflow-tooltip="true" type="index" align="center"></el-table-column>
				<el-table-column :show-overflow-tooltip="true" label="设备" align="center" prop="name"></el-table-column>
				<el-table-column :show-overflow-tooltip="true" label="应用名称" align="center" prop="appname"></el-table-column>
				<el-table-column :show-overflow-tooltip="true" label="应用版本" align="center" prop="appver"></el-table-column>
				<el-table-column :show-overflow-tooltip="true" label="异常时间" align="center" prop="time"></el-table-column>
				<el-table-column :show-overflow-tooltip="true" label="异常描述" align="center" prop="desc">
				</el-table-column>
			</el-table>
			<div class="block" style="text-align:right">
				<el-pagination @size-change="handleExpSizeChange" @current-change="handleExpCurrentChange" :current-page="expCurrentPage" :page-size="expPageSize" :page-sizes="[10, 20, 30, 40, 50]" layout="total,sizes, prev, pager, next, jumper" :total="expTotalSize">
				</el-pagination>
			</div>
		</el-dialog>
		<!-- 删除历史数据 -->
		<el-dialog title="删除历史数据" v-model="deleteDialog" :class="[dialog-tiny-width]">
			<el-form id="form" ref="deleteForm" :model="deleteForm" label-width="100px">
				<el-form-item label="开始日期" prop="beginTime">
					<el-date-picker v-model="deleteForm.beginTime" :clearable="false" size="small" type="date" placeholder="选择起始日期"></el-date-picker>
				</el-form-item>
				<el-form-item label="结束日期" prop="endTime">
					<el-date-picker v-model="deleteForm.endTime" :clearable="false" size="small" type="date" placeholder="选择起始日期"></el-date-picker>
				</el-form-item>
			</el-form>
			<span slot="footer" class="dialog-footer">
				<el-button @click="deleteDialog = false">取 消</el-button>
				<el-button type="primary" @click="confirmDeleteData">确定</el-button>
			</span>
		</el-dialog>
	</div>
</template>

<script>
	import $ from 'jquery';
	import swf from '../../../../assets/js/swfobject.js'
	import headerOpreate from '../../../../components/headerOpreate'
	import { GloabFun, HttpServer } from '../../../../assets/js/common.js'
	import { Animation } from '../../../../assets/js/common.js'
	import imgDefault from '../../../../assets/images/title-right.png'
	var echarts = require('echarts/lib/echarts');
	// 引入折线图
	require('echarts/lib/chart/line');
	// 引入柱状图
	require('echarts/lib/chart/bar');
	// 引入提示框和标题组件
	require('echarts/lib/component/tooltip');
	require('echarts/lib/component/toolbox');
	require('echarts/lib/component/title');
	require('echarts/lib/component/legend');
	var that = null;
	var flag = true;
	var myChart_line = null;
	var date = new Date();
	export default {
		components: {
			headerOpreate
		},
		data() {
			Date.prototype.format = function(format) {
				var date = {
					"M+": this.getMonth() + 1,
					"d+": this.getDate()
				};
				if(/(y+)/i.test(format)) {
					format = format.replace(RegExp.$1, (this.getFullYear() + '').substr(4 - RegExp.$1.length));
				}
				for(var k in date) {
					if(new RegExp("(" + k + ")").test(format)) {
						format = format.replace(RegExp.$1, RegExp.$1.length == 1 ?
							date[k] : ("00" + date[k]).substr(("" + date[k]).length));
					}
				}
				return format;
			}
			return {
				deleteDialog: false,
				deleteForm: {
					beginTime: new Date((date.getTime() - 3600 * 1000 * 24 * 7)).format('yyyy-MM-dd') + ' 00:00:00',
					endTime: date.format('yyyy-MM-dd') + ' 23:59:59',
				},
				imgTitleUrl: imgDefault,
				pingTime: '未知',
				IsOnLine: false, //设备是否在线
				loading: false, //数据加载
				deviceInfoData: [], //设备信息
				internetInfoData: [], //网络信息
				currentPage: 1,
				pageSize: 10,
				totalSize: 0,
				multipleSelection: [],
				warningData: [], //报警记录
				radio: 3, //清初人流量的选择
				info: {
					OutFlow: 0,
					InFlow: 0
				}, //设备属性信息
				renameDeviceDialog: false,
				changeDeviceIpDialog: false,

				//故障记录
				failureDialog: false,
				failureDatas: [],
				failureCurrentPage: 1,
				failurePageSize: 10,
				failureTotalSize: 0,
				failureStartTime: new Date((date.getTime() - 3600 * 1000 * 24 * 7)).format('yyyy-MM-dd') + ' 00:00:00',
				failureEndTime: date.format('yyyy-MM-dd') + ' 23:59:59',

				//异常报告
				expDialog: false,
				expDatas: [],
				expCurrentPage: 1,
				expPageSize: 10,
				expTotalSize: 0,
				expStartTime: new Date((date.getTime() - 3600 * 1000 * 24 * 7)).format('yyyy-MM-dd') + ' 00:00:00',
				expEndTime: date.format('yyyy-MM-dd') + ' 23:59:59',

				refreshObj: {
					waitting: false
				},
				SyncObj: {
					waitting: false
				},
				clearObj: {
					waitting: false
				},
				turnDeviceObj: {
					waitting: false
				},
				changeIpObj: {
					waitting: false
				},
				refreshDeviceTimeObj: {
					waitting: false
				},
				changeIpForm: {
					ip: '',
					mask: '',
					gateway: ''
				},
				changeNameForm: {
					name: ''
				},
				changeNameRules: {
					name: [{
						required: true,
						message: "设备名称不能为空"
					}],
				},
				changeRules: {
					ip: [{
						required: true,
						message: "IP地址不能为空"
					}],
					mask: [{
						required: true,
						message: "设备掩码不能为空"
					}],
					gateway: [{
						required: true,
						message: "设备网关不能为空"
					}]
				},
			}
		},
		props: {
			templateObj: {
				type: Object,
				default: {}
			}
		},
		methods: {
			executeAction(action) {
				if(action) {
					this[action]();
				}
			},
			backPrev() {
				// this.$emit('changeView', "controlList", {})
			},
			//清除历史数据
			deleteHistoryData() {
				this.deleteDialog = true;
			},
			confirmDeleteData() {
				this.$confirm('此操作将删除所选时间段内的数据，是否继续?', '提示', {
					confirmButtonText: this.$t('message.yes'),
					cancelButtonText: this.$t('message.no'),
					type: 'warning'
				}).then(() => {
					this.loading = true;
					HttpServer.httpPost.call(this, '/Api/SecureGate/DeleteHistoryData', {
						UserId: parseInt(GloabFun.getKeyId()),
						sns: [this.templateObj.sn],
						begin: new Date(this.deleteForm.beginTime).format('yyyy-MM-dd')+ ' 00:00:00',
						end: new Date(this.deleteForm.endTime).format('yyyy-MM-dd')+ ' 23:59:59'
					}, function(response){}, function(response){
						this.loading = false;
						if(response.data.code === 0){
							this.$notify({
								title: '成功',
								message: '历史数据删除成功',
								type: 'success',
								duration: 2500
							});
						}else {
							this.$notify.error({
								title: '错误',
								message: response.data.msg,
								duration: 2500
							});
						}
					})
				}).catch(() => {
					this.$notify.info({
						title: '消息',
						message: this.$t('message.operationCanceled'),
						duration: 2500
					})
				});
			},
			openFailure() {
				this.getFailureDatas();
				this.failureDialog = true;
			},
			//查询设备故障记录
			getFailureDatas() {
				var param = {
					index: this.failureCurrentPage,
					pagesize: this.failurePageSize,
					sn: [this.templateObj.sn],
					begin: this.failureStartTime,
					end: this.failureEndTime,
					type: 2,
					filter: ''
				}
				HttpServer.httpPost.call(this, '/Api/Device/Failure', param, function(response) {}, function(response) {
					// console.log('故障信息',response);
					if(response.data.code === 0) {
						this.failureDatas = response.data.failure;
						this.failureTotalSize = response.data.totalcount;
					} else {
						this.$notify.error({
							title: '错误',
							message: response.data.msg,
							duration: 2500
						});
					}
				});
			},
			changeFailureStartTime(val) {
				this.failureStartTime = val + ' 00:00:00';
				this.getFailureDatas();
			},
			changeFailureEndTime(val) {
				this.failureEndTime = val + ' 23:59:59';
				this.getFailureDatas();
			},
			handleFailureCurrentChange(val) {
				this.failureCurrentPage = val;
				this.getFailureDatas();
			},
			handleFailureSizeChange(val) {	
				this.failurePageSize = val;
				this.getFailureDatas();
			},

			openExp() {
				this.getExpDatas();
				this.expDialog = true;
			},
			getExpDatas() {
				var param = {
					index: this.expCurrentPage,
					pagesize: this.expPageSize,
					sn: [this.templateObj.sn],
					begin: this.expStartTime,
					end: this.expEndTime,
					type: 2,
					filter: ''
				}
				HttpServer.httpPost.call(this, '/Api/Device/AppException', param, function(response) {}, function(response) {
					if(response.data.code === 0) {
						this.expDatas = response.data.exp;
						this.expTotalSize = response.data.totalcount;
					} else {
						this.$notify.error({
							title: '错误',
							message: response.data.msg,
							duration: 2500
						});
					}
				})
			},
			changeExpStartTime(val) {
				this.expStartTime = val + ' 00:00:00';
				this.getExpDatas();
			},
			changeExpEndTime(val) {
				this.expEndTime = val + ' 23:59:59';
				this.getExpDatas();
			},
			handleExpCurrentChange(val) {
				this.expCurrentPage = val;
				this.getExpDatas();
			},
			handleExpSizeChange(val) {
				this.expPageSize = val;
				this.getExpDatas();
			},
			//修改设备名称
			changeDeviceName(row) {
				this.renameDeviceDialog = true;
				this.changeNameForm.name = row.name;
			},
			//确定修改名称
			confirmChangeName(formName) {
				this.$refs[formName].validate((valid) => {
					if(valid) {
						HttpServer.httpPost.call(this, '/Api/SecureGate/update', {
							sn: this.templateObj.sn,
							name: this.changeNameForm.name
						}, function(response) {}, function(response) {
							if(response.data.code === 0) {
								this.renameDeviceDialog = false;
								this.$notify({
									title: '成功',
									message: this.$t('message.operationSuccess'),
									type: 'success',
									duration: 2500
								});
								this.$emit('changeView', 'List', this.templateObj);
							} else {
								this.$notify.error({
									title: '错误',
									message: response.data.msg,
									duration: 2500
								});
							}
						})
					} else {
						return false;
					}
				})
			},
			//打开修改IP弹窗
			changeDeviceIp(row) {
				if(this.IsOnLine) {
					this.changeDeviceIpDialog = true;
					this.changeIpForm.ip = row.IP;
					this.changeIpForm.mask = row.Mask;
					this.changeIpForm.gateway = row.GateWay;
				} else {
					this.$notify({
						title: this.$t('message.warning'),
						message: '设备处于离线状态，不可控制。',
						type: 'warning',
						duration: 2500
					});
				}
			},
			//确认修改IP
			confirmChangeIp(formName) {
				this.$refs[formName].validate((valid) => {
					if(valid) {
						clearInterval(this.secureGateDetailIntervalid);
						this.$nextTick(function() {
							this.changeIpObj.waitting = true;
							var paramContent = {
								ip: this.changeIpForm.ip,
								mask: this.changeIpForm.mask,
								gateway: this.changeIpForm.gateway
							}
							HttpServer.httpPost.call(this, '/Api/User/Command/Send', {
								cmd: 11007,
								sn: [this.templateObj.sn],
								content: JSON.stringify(paramContent)
							}, function(response) {}, function(response) {
								this.secureGateDetailIntervalid = setInterval(() => {
									this.getDatas();
									this.getStatistics();
								}, 5000)
								this.changeIpObj.waitting = false;
								if(response.data.code === 0 && response.data.response.length > 0) {
									if(response.data.response[0].sn === this.templateObj.sn && 　response.data.response[0].code === 0) {
										this.$notify({
											title: '成功',
											message: this.$t('message.operationSuccess'),
											type: 'success',
											duration: 2500
										});
									} else {
										this.$notify.error({
											title: '错误',
											message: this.$t('message.operationFailed'),
											duration: 2500
										});
									}
								} else {
									this.$notify.error({
										title: '错误',
										message: this.$t('message.operationFailed'),
										duration: 2500
									});
								}
							});
						})
					} else {
						return false;
					}
				})
			},
			//清除进出人数
			clearFlowCount() {
				if(this.IsOnLine) {
					clearInterval(this.secureGateDetailIntervalid);
					this.$nextTick(function() {
						this.clearObj.waitting = true;
						var paramContent = {
							op: this.radio
						}
						HttpServer.httpPost.call(this, '/Api/User/Command/Send', {
							cmd: 11002,
							sn: [this.templateObj.sn],
							content: JSON.stringify(paramContent)
						}, function(response) {}, function(response) {
							this.secureGateDetailIntervalid = setInterval(() => {
								this.getDatas();
								this.getStatistics();
							}, 5000)
							this.clearObj.waitting = false;
							if(response.data.code === 0 && response.data.response.length > 0) {
								if(response.data.response[0].sn === this.templateObj.sn && 　response.data.response[0].code === 0) {
									this.$notify({
										title: '成功',
										message: this.$t('message.operationSuccess'),
										type: 'success',
										duration: 2500
									});
								} else {
									this.$notify.error({
										title: '错误',
										message: this.$t('message.operationFailed'),
										duration: 2500
									});
								}
							} else {
								this.$notify.error({
									title: '错误',
									message: this.$t('message.operationFailed'),
									duration: 2500
								});
							}
						});
					})
				} else {
					this.$notify({
						title: this.$t('message.warning'),
						message: '设备处于离线状态，不可控制。',
						type: 'warning',
						duration: 2500
					});
				}
			},
			//反转设备方向
			turnDevice() {
				if(this.IsOnLine) {
					clearInterval(this.secureGateDetailIntervalid);
					this.$nextTick(function() {
						this.turnDeviceObj.waitting = true;
						var paramContent = {}
						HttpServer.httpPost.call(this, '/Api/User/Command/Send', {
							cmd: 11003,
							sn: [this.templateObj.sn],
							content: JSON.stringify(paramContent)
						}, function(response) {}, function(response) {
							this.secureGateDetailIntervalid = setInterval(() => {
								this.getDatas();
								this.getStatistics();
							}, 5000)
							this.turnDeviceObj.waitting = false;
							if(response.data.code === 0 && response.data.response.length > 0) {
								if(response.data.response[0].sn === this.templateObj.sn && 　response.data.response[0].code === 0) {
									this.$notify({
										title: '成功',
										message: this.$t('message.operationSuccess'),
										type: 'success',
										duration: 2500
									});
								} else {
									this.$notify.error({
										title: '错误',
										message: this.$t('message.operationFailed'),
										duration: 2500
									});
								}
							} else {
								this.$notify.error({
									title: '错误',
									message: this.$t('message.operationFailed'),
									duration: 2500
								});
							}
						});
					})
				} else {
					this.$notify({
						title: this.$t('message.warning'),
						message: '设备处于离线状态，不可控制。',
						type: 'warning',
						duration: 2500
					});
				}
			},
			//更新设备时间
			refreshDeviceTime() {
				if(this.IsOnLine) {
					clearInterval(this.secureGateDetailIntervalid);
					this.$nextTick(function() {
						this.refreshDeviceTimeObj.waitting = true;
						var paramContent = {}
						HttpServer.httpPost.call(this, '/Api/User/Command/Send', {
							cmd: 11005,
							sn: [this.templateObj.sn],
							content: JSON.stringify(paramContent)
						}, function(response) {}, function(response) {
							this.secureGateDetailIntervalid = setInterval(() => {
								this.getDatas();
								this.getStatistics();
							}, 5000)
							this.refreshDeviceTimeObj.waitting = false;
							// console.log('获取设备时间',response)
							if(response.data.code === 0 && response.data.response.length > 0) {
								if(response.data.response[0].sn === this.templateObj.sn && 　response.data.response[0].code === 0) {
									this.$notify({
										title: '成功',
										message: this.$t('message.operationSuccess'),
										type: 'success',
										duration: 2500
									});
								} else {
									this.$notify.error({
										title: '错误',
										message: this.$t('message.operationFailed'),
										duration: 2500
									});
								}
							} else {
								this.$notify.error({
									title: '错误',
									message: this.$t('message.operationFailed'),
									duration: 2500
								});
							}
						});
					})
				} else {
					this.$notify({
						title: this.$t('message.warning'),
						message: '设备处于离线状态，不可控制。',
						type: 'warning',
						duration: 2500
					});
				}
			},
			handleCurrentChange(val) {
				this.currentPage = val;
				this.getWarningDatas();
			},
			handleSelectionChange(val) {
				this.multipleSelection = val;
			},
			formateSelection() {
				var result = [];
				var array = this.multipleSelection;
				this.multipleSelection.forEach(function(item) {
					result.push(item.id)
				})
				return result;
			},
			//刷新设备报警记录
			refreshWarningData() {
				HttpServer.httpGet.call(this, '/Api/SecureGate/warning?sn=' + this.templateObj.sn + '&index=' + this.currentPage + '&pagesize=' + this.pageSize, function(response) {}, function(response) {
					if(response.data.code === 0) {
						this.warningData = response.data.info;
						this.totalSize = response.data.total;
						this.$notify({
							title: '成功',
							message: this.$t('message.refreshSuccess'),
							type: 'success',
							duration: 2500
						});
					} else {
						this.$notify.error({
							title: '错误',
							message: response.data.msg,
							duration: 2500
						});
					}
				});
			},
			//删除设备报警记录
			deleteWarning() {
				if(this.formateSelection().length > 0) {
					this.$confirm('此操作将删除所选报警记录信息，是否继续?', '提示', {
						confirmButtonText: '确定',
						cancelButtonText: '取消',
						type: 'warning'
					}).then(() => {
						HttpServer.httpPost.call(this, '/Api/SecureGate/delete/warning', {
							keyid: this.formateSelection()
						}, function(response) {}, function(response) {
							if(response.data.code === 0) {
								this.$notify({
									title: '成功',
									message: '删除成功',
									type: 'success',
									duration: 2500
								});
								this.getWarningDatas()
							} else {
								this.$notify.error({
									title: '错误',
									message: response.data.msg,
									duration: 2500
								});
							}
						});
					}).catch(() => {
						this.$notify.info({
							title: '消息',
							message: this.$t('message.cancleOperation'),
							duration: 2500
						})
					});
				} else {
					this.$confirm('此操作将清空报警记录信息，是否继续?', '提示', {
						confirmButtonText: '确定',
						cancelButtonText: '取消',
						type: 'warning'
					}).then(() => {
						HttpServer.httpPost.call(this, '/Api/SecureGate/delete/warning', {
							keyid: this.formateSelection()
						}, function(response) {}, function(response) {
							if(response.data.code === 0) {
								this.$notify({
									title: '成功',
									message: '清除成功',
									type: 'success',
									duration: 2500
								});
								this.getWarningDatas()
							} else {
								this.$notify.error({
									title: '错误',
									message: response.data.msg,
									duration: 2500
								});
							}
						});
					}).catch(() => {
						this.$notify.info({
							title: '消息',
							message: this.$t('message.cancleOperation'),
							duration: 2500
						})
					});
				}
			},
			//刷新
			reloadDatas() {
				this.loading = true;
				HttpServer.httpPost.call(this, '/Api/SecureGate/AllInfo', {
					sn: this.templateObj.sn
				}, function(response) {}, function(response) {
					this.loading = false;
					if(response.data.code === 0) {
						this.deviceInfoData = [];
						this.templateObj.serial = response.data.congig.serial;
						this.templateObj.type = response.data.congig.type;
						this.templateObj.version = response.data.congig.version;
						this.deviceInfoData.push(this.templateObj);
						if(response.data.info != null) {
							this.internetInfoData = [];
							this.internetInfoData.push(response.data.info);
							this.info = response.data.info;
						}
						this.$notify({
							title: '成功',
							message: this.$t('message.refreshSuccess'),
							type: 'success',
							duration: 2500
						});
					} else {
						this.$notify.error({
							title: '错误',
							message: response.data.msg,
							duration: 2500
						});
					}
				});
				this.getStatistics();
			},
			getTimeArr() {
				var arr = [];
				for(var i = 1; i < 25; i++) {
					arr.push(i + ':00');
				}
				return arr;
			},
			//获取图表数据
			getStatistics() {
				HttpServer.httpGet.call(this, '/Api/SecureGate/Statistics?sn=' + this.templateObj.sn + '&begin=&end=', function(response) {}, function(response) {
					// console.log('response',response)
					if(response.data.code === 0) {
						// this.$nextTick(function(){
							myChart_line = echarts.init(document.getElementById('echart_line'));
							myChart_line.setOption({
								animation: false,
								tooltip: {
									trigger: 'axis',
									axisPointer: {
										type: 'cross',
										crossStyle: {
											color: '#999'
										}
									}
								},
								toolbox: {
									feature: {
										dataView: {
											show: true,
											readOnly: false
										},
										magicType: {
											show: true,
											type: ['line', 'bar']
										},
										restore: {
											show: true
										},
										saveAsImage: {
											show: true
										}
									}
								},
								legend: {
									data: ['进馆人数', '出馆人数', '在馆人数']
								},
								xAxis: [{
									type: 'category',
									data: this.getTimeArr(),
									axisPointer: {
									// type: 'shadow'
								}
							}],
							yAxis: [{
								type: 'value',
								name: '人流量（人/时）'
							},
							{
								type: 'value',
								name: '在馆数（人）'
							}
							],
							series: [{
								name: '进馆人数',
								type: 'bar',
								data: response.data.inflow
							},
							{
								name: '出馆人数',
								type: 'bar',
								data: response.data.outflow
							},
							{
								name: '在馆人数',
								type: 'line',
									// yAxisIndex: 1, 
									data: response.data.inlibrary
								}
								]
							});
						// })
					}
				})
			},
			//获取设备报警记录
			getWarningDatas() {
				HttpServer.httpGet.call(this, '/Api/SecureGate/warning?sn=' + this.templateObj.sn + '&index=' + this.currentPage + '&pagesize=' + this.pageSize, function(response) {}, function(response) {
					if(response.data.code === 0) {
						this.warningData = response.data.info;
						this.totalSize = response.data.total;
					}
				});
			},
			getDatas() {
				// this.loading = true;
				HttpServer.httpPost.call(this, '/Api/SecureGate/AllInfo', {
					sn: this.templateObj.sn
				}, function(response) {}, function(response) {
					// this.loading = false;
					if(response.data.code === 0) {
						this.pingTime = response.data.pingtime;
						this.deviceInfoData = [];
						this.templateObj.serial = response.data.congig.serial;
						this.templateObj.type = response.data.congig.type;
						this.templateObj.version = response.data.congig.version;
						this.deviceInfoData.push(this.templateObj);
						if(response.data.info != null) {
							this.internetInfoData = [];
							this.internetInfoData.push(response.data.info);
							this.info = response.data.info;
						}
					} else {
						this.$notify.error({
							title: '错误',
							message: response.data.msg,
							duration: 2500
						});
					}
					this.getWarningDatas();
					this.getStatistics();
				});
			},
			//定时刷新
			getTimeDatas(){
				HttpServer.httpPost.call(this, '/Api/SecureGate/AllInfo', {
					sn: this.templateObj.sn
				}, function(response) {}, function(response) {
					// this.loading = false;
					this.getStatistics();
					if(response.data.code === 0) {
						this.pingTime = response.data.pingtime;
						this.deviceInfoData = [];
						this.templateObj.serial = response.data.congig.serial;
						this.templateObj.type = response.data.congig.type;
						this.templateObj.version = response.data.congig.version;
						this.deviceInfoData.push(this.templateObj);
						if(response.data.info != null) {
							this.internetInfoData = [];
							this.internetInfoData.push(response.data.info);
							this.info = response.data.info;
						}
					} else {}
				});
			}
		},
		created() {
			// console.log(this.templateObj)
			this.IsOnLine = this.templateObj.online;
			this.getDatas();
			if(this.templateObj.online) {
				this.secureGateDetailIntervalid = setInterval(() => {
					this.getTimeDatas();
				}, 5000)
			}
		},
		beforeDestroy() {
			clearInterval(this.secureGateDetailIntervalid);
		}	
	}
</script>

<style scoped>
	@import '../../../../assets/css/font-awesome-4.7.0/css/font-awesome.css';
</style>
<style scoped lang="less">
	@import '../../../../assets/css/media-screen.less';
</style>

<style scoped lang="less">
	* {
		box-sizing: border-box;
	}
	
	// .el-date-editor.el-input {
		// 	width: 115px;
		// }
		.inner-section {
			// margin: 5px 5px;
			// height: 100%;
			// border: 1px solid #BEBEBE;
			.flash-object {
				// margin: 5px 0;
				height: 368px;
				// height: e("calc(100% - 40px)");
				position: relative;
			}
			.opreat-button {
				//text-align: center;
			}
		}

		.navList {
			width: 100%;
			padding: 3px 0;
			display: flex;
			justify-content: space-around;
			align-items: center;
		}

		.el-row {
			margin-bottom: 5px;
			.bg-purple {
				width: 100%;
				// background: #EAF4FF;
				.detail-title {
					text-align: center;
				}
				.middle-section {
					width: 100%;
					display: flex;
					.middle-bg {}
				}
				.icon-default {
					color: #999999;
				}
				.panel-title {
					width: 100%;
					height: 25px;
					color: white;
					// background-color: rgba(32,160,255,.2);
					background-color: #20A0FF;
					border-radius: 3px;
					// border-bottom: 1px solid #20A0FF;
					line-height: 25px;
					padding-left: 10px;
					.title-img {
						width: 30%;
						float: right;
						height: 100%;
						width: 100px
					}
				}
				.detail-section {
					width: 100%;
					height: 80px;
					display: flex;
					justify-content: space-around;
					.section-left {
						display: flex;
						flex-direction: column;
						justify-content: space-around;
						align-items: center;
						width: 40%;
						height: 100%;
						// padding: 5px;
					}
					.section-right {
						// text-align: left;
						display: flex;
						flex-direction: column;
						text-align: center;
						justify-content: space-around;
						// align-items: center;
						width: 60%;
						padding: 3px;
						height: 100%;
					}
				}
				.detail-section-3 {
					height: 100px;
					width: 100%;
					display: flex;
					justify-content: space-around;
					>div {
						display: flex;
						align-items: center;
						justify-content: space-around;
						flex-direction: column;
						width: 33%;
						height: 100%;
						.icon {
							height: 44px;
							line-height: 55px;
							i {
								font-size: 43px;
							}
						}
					}
				}
				.detail-section-2 {
					height: 150px;
					width: 100%;
					>div:nth-of-type(1) {
						border-bottom: 1px solid #7f93aa;
						display: flex;
						flex-direction: column;
						justify-content: space-around;
					}
					>div {
						height: 50%;
						display: flex;
						flex-direction: column;
						justify-content: space-around;
					}
				}
			}
		}

		.grid-content {
			border: 1px solid #FFFFFF;
			height: 400px;
		}

		.grid-content1 {
			box-shadow: 0 1px 4px #000;
			border-radius: 5px;
			margin-top: 1px;
			height: 100%;
		}

		.row-bg {
			padding: 10px 0;
			background-color: #f9fafc;
		}
        .mb5{
            margin-bottom: 5px;
        }
	</style>